<template>
  <div id="detail">
    <detail-nav-bar
        ref="detailNavBar"
        :nav-bar-item="['商品', '参数', '评论', '推荐']"
        :current-index="scrollCurrentIndex"
        @tabIndex="tabNavIndex"></detail-nav-bar>
    <b-scroll ref="BScroll"
              class="detail-scroll"
              :probe-type="3"
              @scroll="scroll">
      <detail-swiper :banners="goodsTopImages"></detail-swiper>
      <goods-info :goods="goodsInfo"></goods-info>
      <detail-image :goods-image="goodsImage" ref="goodsImage"></detail-image>
      <detail-params :detail-params="goodsParams" ref="detailParams"></detail-params>
      <detail-comment :goods-comment="goodsComment" ref="detailComment"></detail-comment>
      <guess-you-like :goods="goodsRecommends" ref="guessYouLike"></guess-you-like>
    </b-scroll>
    <detail-bottom-bar @addShopCar="addShopCar"></detail-bottom-bar>
    <mask-layer v-show="maskShow"></mask-layer>
  </div>
</template>

<script>
import BScroll from "@/components/common/bScroll/BScroll";
import DetailNavBar from "@/views/details/childComponents/DetailNavBar";
import DetailSwiper from "@/views/details/childComponents/DetailSwiper";
import GoodsInfo from "@/views/details/childComponents/GoodsInfo";
import DetailImage from "@/views/details/childComponents/DetailImage";
import DetailParams from "@/views/details/childComponents/DetailParams"
import DetailComment from "@/views/details/childComponents/DetailComment"
import GuessYouLike from "@/views/details/childComponents/GuessYouLike";
import DetailBottomBar from "@/views/details/childComponents/DetailBottomBar";
import MaskLayer from "@/components/common/mask/MaskLayer"
import {getGoodsDetail, getGoodsRecommend} from "@/network/detail";
import {Goods, DetailInfo, DetailParamsInfo, GoodsComment, transformList} from "@/common/const";
import {debounce} from "@/common/utils";

export default {
  name: "Detail",
  data() {
    return {
      goodsTopImages: [],
      goodsInfo: {},
      goodsImage: {},
      goodsParams: {},
      goodsComment: {},
      goodsRecommends: [],
      navHeight: [],
      scrollCurrentIndex: 0,
      maskShow: true
    }
  },
  components: {
    DetailNavBar,
    DetailSwiper,
    GoodsInfo,
    BScroll,
    DetailImage,
    DetailParams,
    DetailComment,
    GuessYouLike,
    DetailBottomBar,
    MaskLayer
  },
  methods: {
    //滚动监听
    scroll(position) {
      const justPosition = -position.y;
      //滚动时顶部控制栏跟着变化
      if (this.scrollCurrentIndex !== 0 && justPosition < this.navHeight[1]) {
        this.scrollCurrentIndex = 0;
      } else if (this.scrollCurrentIndex !== 1 && justPosition >= this.navHeight[1] && justPosition < this.navHeight[2]) {
        this.scrollCurrentIndex = 1;
      } else if(this.scrollCurrentIndex !== 2 && justPosition >= this.navHeight[2] && justPosition < this.navHeight[3]) {
        this.scrollCurrentIndex = 2;
      } else if(this.scrollCurrentIndex !== 3 && justPosition >= this.navHeight[3]) {
        this.scrollCurrentIndex = 3;
      }
    },

    //更行各个模块距离顶部的高度
    updateNavHeight() {
      if (this.$refs.goodsImage) {
        this.navHeight = [];
        this.navHeight.push(this.$refs.goodsImage.$el.offsetTop);
        this.navHeight.push(this.$refs.detailParams.$el.offsetTop);
        this.navHeight.push(this.$refs.detailComment.$el.offsetTop);
        this.navHeight.push(this.$refs.guessYouLike.$el.offsetTop);
      }
    },

    //切换顶部导航栏
    tabNavIndex(index) {
      this.$refs.BScroll.scrollTo(0, -this.navHeight[index], 500)
    },

    //加入购物车
    addShopCar() {
      const shopCarGood = {
        iid: this.$route.params.iid,
        name: this.goodsInfo.shopInfo.name,
        title: this.goodsInfo.itemInfo.title,
        image: this.goodsImage.detailImage[0],
        price: this.goodsInfo.itemInfo.lowNowPrice,
        quantity: 1,
        isChecked: false
      }
      console.log(shopCarGood);
      this.$store.dispatch('addProductToCart', shopCarGood)
          .then(message => {
            this.$toast.showToast(message)
          })
    },
  },
  created() {
    /*
    * 获取网络数据
    */
    getGoodsDetail(this.$route.params.iid).then(goodsInfo => {
      //轮播图信息
      this.goodsTopImages = goodsInfo.result.itemInfo.topImages;
      //商品名称，店铺等基本信息
      this.goodsInfo = new Goods(goodsInfo.result.itemInfo, goodsInfo.result.columns, goodsInfo.result.shopInfo);
      //商品图片
      this.goodsImage = new DetailInfo(goodsInfo.result.detailInfo);
      //商品参数
      this.goodsParams = new DetailParamsInfo(goodsInfo.result.itemParams);
      //商品评论
      if (goodsInfo.result.rate.cRate !== 0) {
        this.goodsComment = new GoodsComment(goodsInfo.result.rate.list[0]);
      }
    });

    getGoodsRecommend().then(goodsInfo => {
      //商品推荐
      this.goodsRecommends = transformList(goodsInfo.data.list);
    });
  },
  mounted() {
    this.$nextTick(() => {
      const imgLoadEnd = debounce(() => {
        this.updateNavHeight();
        this.maskShow = false;
      }, 2000)

      this.$bus.$on('imgLoadEnd', () => {
        imgLoadEnd()
      })
    })
  }
}
</script>

<style scoped>
  #detail {
    background-color: #f6f6f6;
  }
  .detail-scroll {
    height: calc(100vh - 89px);
    overflow: hidden;
  }
</style>